<template>
  <a-watermark :content="content" :alpha="0.6">
    <div class="index">
      <slot name="header" />
      <!-- <a-divider :size="1" :margin="0" /> -->
      <div class="ly-card-body" :style="cssProperties">
        <slot />
      </div>
    </div>
  </a-watermark>
</template>
<script setup lang="ts">
import { GetStaffDetails } from '@/apis/management/personnel/baseSetting/TransactionSetting';
import dayjs from 'dayjs';
const props = withDefaults(
  // 参数说明
  defineProps<{
    padding?: number;
    paddingTop?: number;
    paddingBottom?: number;
    paddingLeft?: number;
    paddingRight?: number;
    margin?: number;
    marginTop?: number;
    marginBottom?: number;
    marginLeft?: number;
    marginRight?: number;
  }>(),
  {
    padding: 20,
    paddingBottom: 0,
    paddingLeft: 0,
    paddingRight: 0,
    paddingTop: 0,
    margin: 0,
    marginBottom: 0,
    marginLeft: 0,
    marginRight: 0,
    marginTop: 0
  }
);
const cssProperties = computed(() => {
  let cssObj: any = {};
  if (!isMargin()) {
    cssObj.margin = `${props.margin}px`;
  } else {
    cssObj.marginTop = `${props.marginTop}px`;
    cssObj.marginBottom = `${props.marginBottom}px`;
    cssObj.marginLeft = `${props.marginLeft}px`;
    cssObj.marginRight = `${props.marginRight}px`;
  }
  if (!isPadding()) {
    cssObj.padding = `${props.padding}px`;
  } else {
    cssObj.paddingTop = `${props.paddingTop}px`;
    cssObj.paddingBottom = `${props.paddingBottom}px`;
    cssObj.paddingLeft = `${props.paddingLeft}px`;
    cssObj.paddingRight = `${props.paddingRight}px`;
  }
  return cssObj;
});
const content = ref();
const code = [
  'CED44AC9966904CD1AB546D309903727C',
  'C7341027925C943708F3AEF98703ECC47'
];
onMounted(async () => {
  let watermarkData = JSON.parse(localStorage.getItem('watermarkData') + '');
  const { mobile, name, id } = JSON.parse(
    localStorage.getItem('userInfo') + ''
  );
  if (!watermarkData) {
    watermarkData = {
      type: 1,
      content: [1, 2, 3, 4, 5]
    };
    localStorage.setItem('watermarkData', JSON.stringify({ ...watermarkData }));
  }
  if (watermarkData.type === 2) {
    content.value = '';
  } else {
    const { ctlValue } = await GetStaffDetails({ id: Number(id) });
    const arrCode = ctlValue.filter(({ ctlCode }: any) =>
      code.includes(ctlCode)
    );
    const department =
      arrCode[arrCode.findIndex(({ ctlCode }: any) => ctlCode === code[0])]
        ?.ctlValue || '暂无部门';
    const position =
      arrCode[arrCode.findIndex(({ ctlCode }: any) => ctlCode === code[1])]
        ?.ctlValue || '暂无职位';
    content.value = [
      name +
        (mobile?.slice(mobile.length - 4)
          ? mobile.slice(mobile.length - 4)
          : '0000')
    ];
    if (
      watermarkData.content.includes(3) &&
      watermarkData.content.includes(4)
    ) {
      content.value.push(department + position);
    } else if (watermarkData.content.includes(3)) {
      content.value.push(department);
    } else if (watermarkData.content.includes(4)) {
      content.value.push(position);
    }
    if (watermarkData.content.includes(5)) {
      content.value.push(dayjs(new Date()).format('YYYY-MM-DD'));
    }
  }
});
const isMargin = () => {
  if (
    props.marginLeft +
    props.marginRight +
    props.marginTop +
    props.marginBottom
  ) {
    return true;
  }
  return false;
};
const isPadding = () => {
  if (
    props.paddingLeft +
    props.paddingRight +
    props.paddingTop +
    props.paddingBottom
  ) {
    return true;
  }
  return false;
};
</script>
<style scoped lang="less">
.index {
  margin: 20px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.12);
  border-radius: 2px;
  background: #fff;
  min-height: calc(100vh - 176px);
  overflow: auto;
  // .ly-card-body {
  // padding: 20px;
  // }
}
</style>
